<template>
    <table>
        <thead>
            <tr>
                <th v-for="item in headerData" :key="item.prop">
                    {{ item.title }}
                </th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="item in data" :key="item.id">
                <template v-for="headerItem in headerData" :key="headerItem.prop">
                    <td v-if="$slots[headerItem.prop]">
                        <slot :name="headerItem.prop" :item="item"></slot>
                    </td>
                    <td v-else>
                        {{ item[headerItem.prop] }}
                    </td>
                </template>
            </tr>
        </tbody>
    </table>
</template>

<script setup lang="ts">
defineProps(['headerData', 'data'])
</script>

<style scoped></style>